.vac-col-messages {
	position: relative;
	height: 100%;
	flex: 1;
	overflow: hidden;
	display: flex;
	flex-flow: column;

	.vac-container-center {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.vac-room-empty {
		font-size: 14px;
		color: #9ca6af;
		font-style: italic;
		line-height: 20px;
		white-space: pre-line;

		div {
			padding: 0 10%;
		}
	}

	.vac-container-scroll {
		background: var(--chat-content-bg-color);
		flex: 1;
		overflow-y: auto;
		margin-right: 1px;
		margin-top: 60px;
		-webkit-overflow-scrolling: touch;

		&.vac-scroll-smooth {
			scroll-behavior: smooth;
		}
	}

	.vac-messages-container {
		padding: 0 5px 5px;
	}

	.vac-text-started {
		font-size: 14px;
		color: var(--chat-message-color-started);
		font-style: italic;
		text-align: center;
		margin-top: 30px;
		margin-bottom: 20px;
	}

	.vac-icon-scroll {
		position: absolute;
		bottom: 80px;
		right: 20px;
		padding: 8px;
		background: var(--chat-bg-scroll-icon);
		border-radius: 50%;
		box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2),
			0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
		display: flex;
		cursor: pointer;
		z-index: 10;

		svg {
			height: 25px;
			width: 25px;
		}
	}

	.vac-messages-count {
		position: absolute;
		top: -8px;
		left: 11px;
		background-color: var(--chat-message-bg-color-scroll-counter);
		color: var(--chat-message-color-scroll-counter);
	}

	.vac-messages-hidden {
		opacity: 0;
	}

	@media only screen and (max-width: 768px) {
		.vac-container-scroll {
			margin-top: 50px;
		}

		.vac-text-started {
			margin-top: 20px;
		}

		.vac-icon-scroll {
			bottom: 70px;
		}
	}
}
